'use client'

import { useState } from 'react'
import Image from 'next/image'
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
import { XMarkIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline'

interface ProductGalleryProps {
  images: {
    url: string
    alt: string
  }[]
}

export default function ProductGallery({ images }: ProductGalleryProps) {
  const [selectedImage, setSelectedImage] = useState(0)
  const [isModalOpen, setIsModalOpen] = useState(false)

  const handlePrevious = () => {
    setSelectedImage((prev) => (prev - 1 + images.length) % images.length)
  }

  const handleNext = () => {
    setSelectedImage((prev) => (prev + 1) % images.length)
  }

  return (
    <>
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        {/* Thumbnails */}
        <div className="md:col-span-1 flex md:flex-col gap-6 order-2 md:order-1 h-full">
          {images.map((image, index) => (
            <button 
              key={index}
              onClick={() => setSelectedImage(index)}
              className={`relative w-full aspect-[4/3] overflow-hidden rounded-lg border-2 transition-colors focus:outline-none
                ${selectedImage === index ? 'border-primary' : 'border-transparent hover:border-gray-300'}`}
            >
              <Image
                src={image.url}
                alt={image.alt}
                fill
                className="object-cover"
                sizes="(max-width: 768px) 33vw, 25vw"
              />
            </button>
          ))}
        </div>

        {/* Main Image */}
        <div className="md:col-span-3 order-1 md:order-2">
          <button 
            onClick={() => setIsModalOpen(true)}
            className="w-full focus:outline-none"
          >
            <div className="relative aspect-[4/3] w-full overflow-hidden rounded-lg bg-gray-100">
              <Image
                src={images[selectedImage].url}
                alt={images[selectedImage].alt}
                fill
                className="object-cover"
                priority
                sizes="(max-width: 768px) 100vw, 75vw"
              />
              <div className="absolute inset-0 flex items-center justify-center bg-black/0 hover:bg-black/10 transition-colors">
                <MagnifyingGlassIcon className="h-8 w-8 text-white opacity-0 hover:opacity-100 transition-opacity" />
              </div>
            </div>
          </button>
        </div>
      </div>

      {/* Modal */}
      {isModalOpen && (
        <div className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center">
          <button
            onClick={() => setIsModalOpen(false)}
            className="absolute top-4 right-4 text-white hover:text-gray-300 z-10"
          >
            <XMarkIcon className="h-8 w-8" />
          </button>

          <button
            onClick={handlePrevious}
            className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 z-10"
          >
            <ChevronLeftIcon className="h-8 w-8" />
          </button>

          <button
            onClick={handleNext}
            className="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 z-10"
          >
            <ChevronRightIcon className="h-8 w-8" />
          </button>

          <div className="relative w-full h-full flex items-center justify-center p-8">
            <Image
              src={images[selectedImage].url}
              alt={images[selectedImage].alt}
              fill
              className="object-contain"
              sizes="100vw"
              priority
            />
          </div>

          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 text-white">
            {selectedImage + 1} / {images.length}
          </div>
        </div>
      )}
    </>
  )
}
